
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        .box {
            width: 100%;
            background-color: #1f1f1f;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div class="box" id="box"></div>
    <script type="importmap">
        {
            "imports": {
                "three": "./three/build/three.module.js",
                "three/addons/": "./three/examples/jsm/"
            }
        }
    </script>


    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js';
        let objects = [];
        let selectedObject = null;
        let box = document.getElementById("box")
        const scene = new THREE.Scene();// 创建场景

        // 辅助线
        const axesHelper = new THREE.AxesHelper(150);
        scene.add(axesHelper);

        // 相机
        const camera = new THREE.PerspectiveCamera();  //相机
        camera.position.set(400, 300, 500); //相机位置
        camera.lookAt(0, 50, 40);   //相机观察位置

        // 渲染器
        let renderer = new THREE.WebGLRenderer({})
        renderer.setSize(window.innerWidth, window.innerHeight)
        box.appendChild(renderer.domElement)

        // 添加模型
        const geometry1 = new THREE.BoxGeometry(10, 10, 10);
        const geometry2 = new THREE.SphereGeometry(10);
        const geometry3 = new THREE.CylinderGeometry(10, 10, 100);
        const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        const mesh1 = new THREE.Mesh(geometry1, material);
        mesh1.position.set(0, 0, 0);
        const mesh2 = new THREE.Mesh(geometry2, material);
        mesh2.position.set(0, 0, 30);
        const mesh3 = new THREE.Mesh(geometry3, material);
        mesh3.position.set(0, 0, 60);
        scene.add(mesh1);
        scene.add(mesh2);
        scene.add(mesh3);

        objects.push(mesh1)
        objects.push(mesh2)
        objects.push(mesh3)

        // 监听鼠标点击事件
        window.addEventListener('mousedown', onDocumentClick, false);

        function onDocumentClick(event) {
            event.preventDefault();

            // 计算鼠标点击位置对应的坐标
            const mouse = new THREE.Vector2();
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

            // 创建射线
            const raycaster = new THREE.Raycaster();
            raycaster.setFromCamera(mouse, camera);

            // 执行射线投射并与场景中的物体相交测试
            const intersects = raycaster.intersectObjects(objects);

            if (intersects.length > 0) {
                // 显示被选中的物体
                selectedObject = intersects[0].object;
                console.log(selectedObject)
            } else {
                selectedObject = null;
            }
        }

        function render() {
            // 清除上次高亮
            objects.forEach((e)=>{
                e.material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
            })
            if (selectedObject) {
                selectedObject.material = new THREE.MeshBasicMaterial({ color: 0xffff00 })
            }
         
            renderer.render(scene, camera)
            requestAnimationFrame(render);
        }
        render();

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.addEventListener('change', function () {
            renderer.render(scene, camera);
        });
    </script>

</body>

</html>